<template>
  <div id="CompanyInfor">
    <el-row>
      <el-col>
        <div class="mr_top_bg">
          <div class="opa">
            <img src="../../assets/img/resume/resume_head_bg.png"/>
          </div>
          <div class="mr_headimg">
            <div @click="showDialog()" style="width:135px;margin:0em auto;">
              <ShowImageCard :url="url" :config="config"></ShowImageCard>
            </div>
          </div>
        </div>
        <div v-if="isEdit === false" class="mr_baseinfo">
          <div class="edit_title">
            <div class="buttons">
              <span>{{companyData.company_name}}</span>
            </div>
            <div>
              <i class="el-icon-edit" @click="editInfomation()"></i>
            </div>
          </div>
          <div class="line">
            <p style="margin:1em auto;color:#666">{{companyData.company_publicity}}</p>
            <i class="fa fa-briefcase iconstyle"></i>
            <span>{{companyData.industry_name}}</span>
          </div>
          <div class="line">
            <i class="fa fa-internet-explorer iconstyle"></i>
            <a :href="companyData.company_website" target="_blank">
              <span>{{companyData.company_website}}</span>
            </a>
          </div>
          <div class="line">
            <i class="fa fa-map-marker iconstyle"></i>
            <span>{{companyData.company_address}}</span>
          </div>
          <div class="mr_moudle_head">
            <div class="mr_titles">
              <span class="mr_title_l"></span>
              <span class="mr_title_c">联系方式</span>
              <span class="mr_title_r"></span>
            </div>
          </div>
          <div class="line">
            <i class="fa fa-user iconstyle"></i>
            <span>{{companyData.contact_person}}</span>
          </div>
          <div class="line">
            <i class="fa fa-envelope iconstyle"></i>
            <a :href="`mailto:${companyData.email}`">
              <span>{{companyData.email}}</span>
            </a>
          </div>
          <div class="lineposition">
            <i class="fa fa-tablet iconstyle"></i>
            <span>{{companyData.tel}}</span>
            <i class="fa fa-phone iconstyle"></i>
            <span>{{companyData.desk_phone}}</span>
          </div>
          <div class="mr_moudle_head">
            <div class="mr_titles">
              <span class="mr_title_l"></span>
              <span class="mr_title_c">公司简介</span>
              <span class="mr_title_r"></span>
            </div>
            <p style="width:70%;margin:0em auto;">{{companyData.company_profile}}</p>
          </div>
        </div>
        <div v-else style="background:#fafafa;padding-bottom:2em">
          <CompanyInformationEdit @returnState="getState"></CompanyInformationEdit>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="isShowImgDialog" size="tiny">
      <UploadImageCard :config="configImg" @sendUploadImageResponse="sendUploadImage"
                       :defaultImageUrl="companyData.license_url"
                       style="margin:0em auto;"></UploadImageCard>
    </el-dialog>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import ShowImageCard from '@/components/common/ShowImageCard'
  import UploadImageCard from '@/components/common/UploadImageCard'
  import CompanyInformationEdit from '@/components/setInfo/CompanyInformationEdit'

  export default {
    name: 'CompanyInfor',
    props: ['authority'],
    data () {
      return {
        url: '',
        config: {
          width: '135px',
          height: '135px'
        },
        configImg: {
          type: 'COMPANY_PORTRAIT_ADD',
          width: '150px',
          height: '150px',
        },
        companyData: {},
        isEdit: false,
        isShowImgDialog: false,
      }
    },
    created () {
      this.getCompanyData()
    },
    methods: {
      showDialog () {
        this.isShowImgDialog = true
      },
      sendUploadImage (data) {
        if (data.status === 0) {
          this.companyData.license_url = data.license_url
          this.isShowImgDialog = false
          this.getCompanyData()
        } else {
          this.$message.error(data.message)
        }
      },
      getCompanyData () {
        let _this = this
        postDataToServer('COMPANY_GET').then((data) => {
          if (data.status === 0) {
            _this.companyData = data.data_list
            if (!data.data_list.license_url) {
              _this.url = undefined
            } else {
              _this.url = data.data_list.license_url
            }
            if (!data.data_list.company_profile) {
              data.data_list.company_profile = '未填写'
            }
          }
        })
      },
      editInfomation () {
        this.isEdit = true
      },
      getState (state) {
        if (state === true) {
          this.isEdit = false
          this.getCompanyData()
        } else {
          this.isEdit = false
        }
      }
    },
    components: {
      ShowImageCard,
      UploadImageCard,
      CompanyInformationEdit
    }
  }
</script>

<style scoped>
  /*简历图片展示样式*/
  .mr_top_bg {
    text-align: center;
    background: #fafafa;
    height: 170px;
    padding-bottom: 20px;
  }

  .mr_top_bg .mr_headimg {
    margin-top: -135px;
    z-index: 1000;
  }

  .mr_top_bg .opa {
    z-index: 1;
  }

  /*公司信息样式*/
  .mr_baseinfo {
    background-color: #fafafa;
    text-align: center;
    padding-bottom: 0.8em;
    font-size: 18px;
    min-height: 500px;
    color: #9FA19F;
  }

  .mr_baseinfo p {
    color: #9FA19F;
    margin: 0.8em auto;
  }

  .mr_baseinfo span {
    margin: 5px 0px;
  }

  .iconstyle {
    color: #999;
    margin-right: 7px;
  }

  .edit_title div {
    display: inline;
  }

  .edit_title i:hover {
    color: #20A0FF;
    cursor: pointer;
  }

  .buttons {
    margin: 0em auto;
  }

  .buttons span {
    font-size: 1.5em;
    color: #333;
  }

  /*中间标题的样式*/
  .mr_head_l {
    float: left;
  }

  .mr_titles {
    position: relative;
    margin: 2em auto 1em;
  }

  .mr_titles .mr_title_l {
    width: 33%;
    height: 0;
    border-top: 1px solid #ededed;
  }

  .mr_titles .mr_title_c {
    font-size: 18px;
    color: #999999;
    padding: 6px 24px;
    text-align: center;
    background-color: #eee;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    border-radius: 26px;
    margin: 0 13px;
  }

  .mr_titles .mr_title_r {
    width: 33%;
    height: 0;
    border-top: 1px solid #ededed;
  }

  .mr_titles span {
    vertical-align: middle;
    display: inline-block;
  }

  .mr_moudle_head {
    margin-bottom: 23px;
    margin: 0 auto;
    margin: 0em auto;
  }

  .line {
    margin: 10px auto;
  }

  .lineposition span {
    margin-right: 15px;
  }

  .line a {
    color: #9FA19F;
    text-decoration: none;
  }

  .line a:hover {
    color: #20A0FF;
  }
</style>
